<template>
  <div>
    <FormTable :formData="formData"
               :columnData="columnData"
               :url="$api.unipush_getUserDateList"
               :editData="editData"
               :is_default_edit="true"
               label-width="160px"
               :is_show_new="false"
               :pageConfig="pageConfig">
      <template slot="detail_content"
                slot-scope="scope">
        <div class="detail_content">
          <div class="detail_content_bottom">
            <Table :tableData="getTable(scope.data)"
                   :columnData="getColumnData(scope.data)"
                   :is_show_pagination="false"
                   :total="1"></Table>
          </div>
        </div>
      </template>
    </FormTable>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formData: [
        {
          name: "create_day",
          label: "日期",
          value: '',
          type: "date_time_range",
          config: {
            format: 'yyyy-MM-dd',
            'value-format': 'yyyy-MM-dd',
            align: 'left'
          },
        },
      ],
      columnData: [
        {
          prop: "create_day",
          label: "日期",
        },
        {
          prop: "newRegistCount",
          label: "新注册用户数"
        },
        {
          prop: "registTotalCount",
          label: "累计注册用户数"
        },
        {
          prop: "activeCount",
          label: "活跃用户数",
        },
        {
          prop: "onlineCount",
          label: "最高同时在线用户数",
        },
      ],
      editData: [],
      pageConfig: {
        page: 1,
        pagesize: 10,
      }
    };
  },
  created () {
  },
  methods: {
    handleSizeChange (e) {
      console.log(e);
    },
    handleCurrentChange (e) {
      console.log(e);
    },
    submit (e) {
      console.log(e);
    },
    reset (e) {
      console.log(e);
    },
    getTable (data) {
      let col = [];
      for(var i in data){
        col.push(data[i])
      }
      return col
    },
    getColumnData (data) {
      return [
        {
          prop: 'type_name',
          label: '类别',
          width: '220px'
        },
        {
          prop: 'sent',
          label: '点击数',
        },
        {
          prop: "displayed",
          label: "到达数",
        },
        {
          prop: "feedback",
          label: "到达数",
        },
        {
          prop: "sent",
          label: "成功下发数",
        },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.detail_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  .detail_content_top {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
    .detail_content_top_box {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-right: 1px solid #ccc;
      .detail_content_top_box_txt {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
      }
      &:last-of-type {
        border-right: none;
      }
    }
  }
}
</style>